<template>
  <el-table
    @row-click="rowClick"
    stripe
    height="100%"
    border
    size="mini"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="种质编号"
      width="140"
    >
      <template slot-scope="scope">
        <el-tooltip effect="light" :content="scope.row.germplasmId" placement="top">
          <div class="table-prop-hidden">
            {{ scope.row.germplasmId }}
          </div>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column label="鉴定名">
      <template slot-scope="scope">
        <el-tooltip effect="light" :content="scope.row.name" placement="top">
          <div class="table-prop-hidden">
            {{ scope.row.name }}
          </div>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
      prop="longitude"
      label="经度"
      width="140"
    >
    </el-table-column>
    <el-table-column
      prop="latitude"
      width="140"
      label="纬度">
    </el-table-column>
    <el-table-column
      prop="ELECATION"
      width="80"
      label="海拔">
    </el-table-column>
    <el-table-column
      prop="count"
      width="80"
      label="数量">
    </el-table-column>
    <el-table-column
      prop="niche"
      width="120"
      label="生境">
    </el-table-column>
    <el-table-column
      prop="associateSpecies"
      width="120"
      label="伴生种">
    </el-table-column>
    <el-table-column
      prop="color"
      width="120"
      label="颜色">
    </el-table-column>
  </el-table>
</template>

<script>
import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'

export default {
  name: 'zzTable',
  props: {
    tableData: {
      type: Array,
      default: []
    }
  },
  setup(props, content) {
    let data = reactive({})
    const rowClick = (row, column, event) => {
      content.emit('rowClick', { row, column, event })

    }
    return { ...toRefs(data), rowClick }
  }
}
</script>

<style scoped lang="scss">
.table-prop-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>
